<template>
	<!-- 收货-订单分享end -->
	<div class="flex">
		<div class="order_Sharing_flex" @click="showShare = true">
			<strong>订单分享</strong>
			<div class="right">
				<img src="@/assets/images/加.png" alt="" />
			</div>
		</div>
		<span>提前给朋友们惊喜</span>

		<van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
	</div>
	<!-- 收货-订单分享end -->
</template>
evaluation

<script>
export default {
	name: 'ConfirmOrderSharing',
	data() {
		return {
			showShare: false, // 分享组件收缩
			options: [
				{ name: '微信', icon: 'wechat' },
				{ name: 'QQ', icon: 'qq' },
				{ name: '微博', icon: 'weibo' },
				{ name: '分享海报', icon: 'poster' },
				{ name: '二维码', icon: 'qrcode' },
			],
		};
	},
	methods: {
		/** @method 分享组件选择分享 */
		onSelect(option) {
			this.$toast(option.name);
			this.showShare = false;
		},
	},
};
</script>

<style scoped>
.flex {
	display: flex;
	flex-direction: column;
	height: auto;
	margin: 23px 26px 12px 26px;
	padding: 15px 20px 16px 22px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
	border-radius: 12px;
}
.order_Sharing_flex {
	display: flex;
	height: auto;
}
.order_Sharing_flex > strong {
	height: 25px;
	color: #3c454b;
	font-family: Noto Sans SC;
	font-size: 20px;
	font-weight: 500;
	line-height: 25px;
	letter-spacing: 0.25714290142059326px;
	text-align: left;
	flex: 1;
}
.order_Sharing_flex > .right > img {
	width: 12px;
	height: 12px;
	vertical-align: middle;
}
span {
	height: 15px;
	margin-top: 10px;
	color: rgb(110, 124, 135);
	font-family: Noto Sans SC;
	font-size: 10px;
	font-weight: 400;
	line-height: 15px;
	letter-spacing: 0px;
	text-align: left;
}
</style>
